<template>
  <div class="app-container">
    <div class="disk-wrapper">
      <DiskUsage
        diskName="rome (D:)"
        diskMax="419 GB"
        diskNow="106 GB"
        limitPercent="80%"
      />
    </div>

    <div class="disk-wrapper">
      <DiskUsage
        diskName="system (C:)"
        diskMax="200 GB"
        diskNow="170 GB"
        limitPercent="80%"
      />
    </div>

    <div class="disk-wrapper">
      <DiskUsage
        diskName="backup (E:)"
        diskMax="1000 GB"
        diskNow="450 GB"
        limitPercent="90%"
      />
    </div>

    <div class="disk-wrapper">
      <DiskUsage
        diskName="games (F:)"
        diskMax="931 GB"
        diskNow="700 GB"
        limitPercent="90%"
      />
    </div>

    <div class="disk-wrapper">
      <DiskUsage
        diskName="media (G:)"
        diskMax="2000 GB"
        diskNow="300 GB"
        limitPercent="80%"
      />
    </div>

    <div class="disk-wrapper">
      <DiskUsage
        diskName="projects (H:)"
        diskMax="500 GB"
        diskNow="480 GB"
        limitPercent="90%"
      />
    </div>

    <div class="disk-wrapper">
      <DiskUsage
        diskName="archive (I:)"
        diskMax="100 GB"
        diskNow="99 GB"
        limitPercent="95%"
        @cleanup="handleCleanup"
      />
    </div>

    <div class="disk-wrapper">
      <DiskUsage
        diskName="downloads (J:)"
        diskMax="256 GB"
        diskNow="128 GB"
        limitPercent="80%"
      />
    </div>

    <div class="disk-wrapper">
      <DiskUsage
        diskName="scratch (K:)"
        diskMax="100 GB"
        diskNow="1 GB"
        limitPercent="80%"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入子组件
import DiskUsage from "../components/DiskUsage2.vue";
// 【新增】定义事件处理器
const handleCleanup = (diskName: string) => {
  // 在实际应用中, 你可以在这里打开一个模态框或调用清理 API
  alert(`父组件收到清理请求: ${diskName}`);
  console.log(`Cleanup event received for disk: ${diskName}`);
};
</script>

<style>
/* 基础 body 样式 (与之前相同) */
body {
  background-color: #1a1a1a;
  padding: 20px;
}
</style>

<style scoped>
/* 修改 app-container 样式
    1. display: flex - 启用 flex 布局
    2. flex-wrap: wrap - 允许子元素换行
    3. flex-direction: row - (默认) 子元素水平排列
    4. gap: 20px - 在行和列之间都设置 20px 的间距
  */
.app-container {
  max-width: 1000px; /* 增大容器宽度以容纳 3 列 */
  margin: 0 auto; /* 居中显示 */
  background-color: #2c2c2c; /* 深灰色容器 */
  padding: 20px;
  border-radius: 8px;

  /* --- 布局核心 --- */
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 统一设置行和列的间距 */
}

/*
    子组件的包裹容器样式
    
    核心是设置宽度：
    我们要实现 3 列，它们之间有 2 个 20px 的 'gap'。
    总宽度 100% 减去总间距 (2 * 20px = 40px)，
    然后将剩余空间除以 3。
    
    calc((100% - 40px) / 3)
  */
.disk-wrapper {
  /* flex-basis 设置了元素的初始大小。
      calc((100% - 40px) / 3) 精确计算了3列布局下每个元素的宽度。
    */
  flex-basis: calc((100% - 40px) / 3);

  /* flex-grow: 1 - 允许元素在有多余空间时放大 (例如在第3行只有1个元素时)
      如果不希望最后一行拉伸，可以设为 0
    */
  flex-grow: 1;

  /* flex-shrink: 1 - 允许元素在空间不足时缩小
    */
  flex-shrink: 1;

  /* 设置一个最小宽度，防止在大屏幕上计算宽度过窄，
      或者在小屏幕上被过度压缩。
    */
  min-width: 250px;

  /* 确保 padding 和 border 不会影响我们的宽度计算 */
  box-sizing: border-box;
}
</style>
